<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
	<base href="<%=basePath%>">
	<!-- jsp文件头和头部 -->
	<%@ include file="../main/main_top.jsp"%> 
	<link type="text/css" rel="stylesheet" href="plugins/zTree/css/zTreeStyle/zTreeStyle.css"/>
	<script type="text/javascript" src="plugins/zTree/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="plugins/zTree/js/jquery.ztree.core-3.5.js"></script>
  	<SCRIPT type="text/javascript" >
  		function getProvince() {
  			$.ajax( {
  				type :'post',
  				url :'site/queryAllProvinceList.json',
  				dataType :'json',
  				success : function(result) {
  					//alert(result.model.provinceList);
  					$.each(result.model.provinceList, function(entryIndex, entry) {
  						var html = "<option value='" + entry.provinceCode + "'>"
  								+ entry.provinceName + "</option>";
  						$("#selprovince").append(html);
  						;
  					});
  				}
  			});
  		}

  		function getCity() {
  			if (document.getElementById("citydiv").style.display == "block"
  					|| document.getElementById("areadiv").style.display == "block") {
  				document.getElementById("citydiv").style.display = "none";
  				document.getElementById("areadiv").style.display = "none";
  			}
  			if (document.getElementById("citydiv").style.display == "none"
  					&& document.getElementById("selprovince").value != 0) {
  				document.getElementById("citydiv").style.display = "block";
  			}
  			$("#selcity option[value!=0]").remove();
  			$("#selarea option[value!=0]").remove();
  			var object = $("#selprovince");
  			if (object.val() != 0) {
  				$.ajax( {
  					type :'post',
  					url :'site/queryAllCityListByProvinceCode/'+object.val()+'.json',
  					dataType :'json',
  					success : function(result) {
  						$.each(result.model.cityList, function(entryIndex, entry) {
  							var html = "<option value='" + entry["cityCode"] + "'>"
  									+ entry["cityName"] + "</option>";
  							$("#selcity").append(html);
  						});
  					}
  				});
  			}
  		}

  		function getArea() {
  			if (document.getElementById("areadiv").style.display == "block") {
  				document.getElementById("areadiv").style.display = "none";
  			}
  			if (document.getElementById("areadiv").style.display == "none"
  					&& document.getElementById("selcity").value != 0) {
  				document.getElementById("areadiv").style.display = "block";
  			}
  			$("#selarea option[value!=0]").remove();
  			var object = $("#selcity");
  			if (object.val() != 0) {
  				$.ajax( {
  					type :'post',
  					url :'site/queryAllAreaListByCityCode/'+object.val()+'.json',
  					dataType :'json',
  					success : function(result) {
  						$.each(result.model.areaList, function(entryIndex, entry) {
  							var html = "<option value='" + entry["areaCode"] + "'>"
  									+ entry["areaName"] + "</option>";
  							$("#selarea").append(html);
  						});
  					}
  				});
  			}
  		}
  	</SCRIPT>
	</head> 
<body onload="getProvince()">
	<div class="container-fluid" id="main-container">
		<div id="page-content" class="clearfix">
			<div class="row-fluid">
					<!-- 检索  -->
					<div class="widget-body">
	                    <!-- BEGIN FORM-->
	                   	<div class="row-fluid">
						<div id="content">
							<table border=0 align=left height="800px">
								<tr>
									<td>
									<div style="display: block;">请选择住址： <select id="selprovince"
										style="width: 135px" onchange="getCity()">
										<option value="0">-请选择省份-</option>
									</select></div>
									</td>
									<td>
									<div id="citydiv" style="display: none;"><select id="selcity"
										style="width: 170px" onchange="getArea()">
										<option value="0">-请选择城市-</option>
									</select></div>
									</td>
									<td>
									<div id="areadiv" style="display: none;"><select id="selarea">
										<option value="0">-请选择地区-</option>
									</select></div>
									</td>
								</tr>								
							</table>
						</div>
					</div>
				</div>
			<!-- PAGE CONTENT ENDS HERE -->
		  	</div><!--/row-->
		</div><!--/#page-content-->
	</div><!--/.fluid-container#main-container-->
	<!-- 返回顶部  -->
	<a href="#" id="btn-scroll-up" class="btn btn-small btn-inverse">
		<i class="icon-double-angle-up icon-only"></i>
	</a>
	</body>
</html>

